<template>
    <div id="userPage">
        <!-- 顶部筛选搜索bar -->
        <div id="topBar">
            <el-input class="input" v-model="searchUserData.name" placeholder="请输入用户名称" clearable></el-input>
            <el-input class="input" v-model="searchUserData.phone" placeholder="请输入用户手机号码" clearable></el-input>
            <el-tooltip effect="dark" placement="bottom" content="搜索">
                <el-button :icon="Search" @click="search(true)" circle />
            </el-tooltip>
            <el-tooltip effect="dark" placement="bottom" content="清空">
                <el-button :icon="Close" @click="cleanCondition" circle />
            </el-tooltip>
        </div>
        <!-- 用户表格 -->
        <el-table :data="userData" style="width: 80%;margin: 0 auto;">
            <el-table-column prop="id" label="id" align="center"></el-table-column>
            <el-table-column prop="name" label="用户名" align="center"></el-table-column>
            <el-table-column label="性别" align="center">
                <template #default="scope">
                    <span>{{ scope.row.sex == 0 ? '女' : '男' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
                <template #default="scope">
                    <el-tooltip effect="dark" placement="bottom" content="编辑">
                        <el-button type="primary" :icon="Edit" circle
                            @click="currentDataChange(scope.row, currentUserData); dialogShowStatus.editUser = true;" />
                    </el-tooltip>
                    <el-tooltip effect="dark" placement="bottom" content="删除">
                        <el-button type="danger" :icon="Delete" circle
                            @click="currentDataChange(scope.row, currentUserData); deleteUser(scope.row.id)" />
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin: 2rem auto;justify-content: center;" background layout="prev, pager, next"
            :page-size="pageSize" @current-change="pageCurrentChange"
            :hide-on-single-page="total < pageSize ? true : false" :total="total" />
        <!-- 编辑用户框 -->
        <el-dialog v-model="dialogShowStatus.editUser" title="编辑用户信息">
            <el-form ref="editUserForm" :model="currentUserData" label-position="top" :rules="formRuleEditUser">
                <el-form-item prop="id">
                    <span>用户id：{{ currentUserData.id }}</span>
                </el-form-item>
                <el-form-item label="小程序openId">
                    <el-input v-model="currentUserData.openId" placeholder="请输入用户名" disabled />
                </el-form-item>
                <el-form-item prop="name" label="用户名">
                    <el-input v-model="currentUserData.name" placeholder="请输入用户名" clearable />
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="currentUserData.sex">
                        <el-radio :label="0">女</el-radio>
                        <el-radio :label="1">男</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="currentUserData.phone" placeholder="请输入电话" clearable />
                </el-form-item>
                <el-form-item label="地址">
                    <el-input type="textarea" v-model="currentUserData.address" placeholder="请输入地址"
                        :autosize="{ minRows: 2 }" clear></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogShowStatus.editUser = false">取消</el-button>
                    <el-button type="primary"
                        @click="submitEditUser(); dialogShowStatus.editUser = false;">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, reactive } from 'vue';
import { getData, currentDataChange } from '../utils/GeneralTool' // 导入全局工具
import { Edit, Delete, Search, Close } from '@element-plus/icons-vue';
import { ElNotification, ElMessageBox } from 'element-plus'
import router from '@/router';
const { proxy } = getCurrentInstance()
// 数据获取
let userData = ref([]) // 用户数据载体
let currentPage = ref(1) // 当前页码
let pageSize = ref(10) // 每页显示条数
let total = ref(0) // 总条数
let searchOrNot = ref(false) // 是否筛选搜索状态量
const pageCurrentChange = (val) => {
    currentPage.value = val // 更改当前页
    if (searchOrNot.value) { // 若筛选搜索过就调用筛选搜索方法
        search(false)
        return
    }
    getUserData()
}
const getUserData = () => { // 获取用户信息
    let prams = [currentPage.value, pageSize.value]
    proxy.$api.getAllUser(prams).then(res => {
        getData(res.userData, userData)
        total.value = res.total
    })
}
onMounted(() => {
    getUserData()
})
// --编辑用户信息--
let dialogShowStatus = reactive({ // 弹窗状态量
    editUser: false,
})
let currentUserData = reactive({}) // 当前选择用户载体
const formRuleEditUser = reactive({
    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
})
let editUserForm = ref()
const submitEditUser = async () => { // 提交编辑用户事件
    await editUserForm.value.validate((valid) => {
        if (valid) {
            proxy.$api.updateUser(currentUserData).then(res => {
                if (res.affectedRows > 0) {
                    ElNotification({
                        title: '提交成功',
                        type: 'success'
                    })
                    router.go(0)
                } else {
                    ElNotification({
                        title: '提交失败，数据库操作失败',
                        type: 'error'
                    })
                }
            })
        } else {
            ElNotification({
                title: '提交失败，请完善用户信息',
                type: 'error'
            })
        }
    })
}
// --删除用户信息--
const deleteUser = (id) => {
    ElMessageBox.confirm(
        '是否删除该用户？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        let params = [id]
        proxy.$api.deleteUserById(params)
            .then(res => {
                if (res.affectedRows > 0) {
                    ElNotification({
                        title: '删除成功',
                        type: 'success'
                    })
                    router.go(0)
                } else {
                    ElNotification({
                        title: '删除失败，数据库操作失败',
                        type: 'error'
                    })
                }
            })
    }).catch(() => { })
}
// --筛选搜索用户--
let searchUserData = reactive({ // 筛选搜索数据载体
    name: null,
    phone: null,
})
const search = (buttonClickOrNot) => { // 筛选搜索
    if (buttonClickOrNot) {
        currentPage.value = 1 // 重设当前页数和数据总量，进行搜索 
        total.value = 0
    }
    searchOrNot.value = true // 修改搜索状态量，已经搜索过了
    if (searchUserData.name == '' || searchUserData.name == ' ') searchUserData.name = null
    if (searchUserData.phone == '' || searchUserData.name == ' ') searchUserData.phone = null
    let prams = [searchUserData.name, searchUserData.phone,currentPage.value, pageSize.value]
    proxy.$api.getUserByCondition(prams).then(res => {
        getData(res.userData, userData)
        total.value = res.total
    })
}
const cleanCondition = () => { // 清空筛选搜索数据
    searchUserData.name = null
    searchUserData.phone = null
}
</script>

<style lang="scss" scoped>
#userPage {
    padding-top: 20px;
}
#topBar {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;

    .input {
        flex: 1;
        margin-right: 1rem;
        max-width: 30%;
    }
}
</style>